import { computed } from 'vue'
import { useI18n } from 'vue-i18n'

import '@arco-design/web-vue/es/tag/style/index.css'
import type { DescData } from '@arco-design/web-vue'

import { useUserStore } from '@/stores/user'
import RoleTag from '@/components/RoleTag/index.vue'

export function useProfile() {
  const { t } = useI18n<[typeof import('../locales/zh-CN.json')], Locales>({ useScope: 'parent' })

  const userStore = useUserStore()

  const profile = computed<DescData[]>(() => [
    {
      label: t('profile.name'),
      value: userStore.user.name
    },
    {
      label: t('profile.uid'),
      value: userStore.user.username
    },
    {
      label: t('profile.role'),
      value: () => <RoleTag role={userStore.user.role} />
    }
  ])

  return { profile }
}
